<template>
  <div class="sale-goods-wrap">
    <div
      v-for="(item, index) in saleOrderList"
      :key="index"
      class="sale-goods-item"
    >
      <div class="label">{{ item.order }}</div>
      <div class="progress">
        <div class="pro" :style="{ width: `${item.progress}%` }"></div>
      </div>
      <div class="num">{{ item.progress }}%</div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    saleOrderList: {
      type: Array,
      default: () => [],
    },
  },
}
</script>

<style lang="scss" scoped>
.sale-goods-wrap {
  height: 330px;
  // background-color: red;
  overflow-y: auto;
  padding: 0px 10px 10px;
  margin-top: 10px;
  .sale-goods-item {
    height: 50px;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    .label {
      width: 100px;
      font-size: 14px;
    }
    .label:hover {
      cursor: pointer;
      color: rgb(90, 177, 239);
      // font-weight: bold;
    }
    .progress {
      flex: 1;
      // height: 22px;
      margin: 0 10px;
      background-color: rgb(238, 238, 238);
      border-radius: 20px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 6px 6px;
      .pro {
        height: 9px;
        border-radius: 8px;
        background-image: linear-gradient(
          to right,
          rgb(255, 197, 122),
          rgb(254, 148, 11)
        );
      }
    }
    .num {
      font-size: 14px;
    }
  }
}
</style>
